I am using -webkit-line-clamp to truncate text like the below example
.box {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
width: 100px;
}<div class="box">
<p>Hey, don't cut me off like that. I want to speak my mind and don't appreciate being put into a box.</p>
</div>Here I am getting 3 dots end of truncation, I want to have a "read more" link at the end of truncated text instead of .... Please let me know if this can be achieved through css or JS
How about this code? This code removes button when doesn't overflow.
var container = document.getElementsByClassName('container');
var i;
for (i=0;i<container.length;i++) {
if (container[i].firstElementChild.scrollHeight<=container[i].firstElementChild.clientHeight) {
container[i].lastElementChild.style.display = 'none';
}
}
function more(x) {
var box = x.parentElement.firstElementChild;
if (!box.classList.contains('box-more')) {
box.classList.add('box-more');
x.innerHTML = "Close";
}
else {
box.classList.remove('box-more');
x.innerHTML = "Read More";
}
}.box {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
width: 100px;
}
.box-more {
-webkit-line-clamp: unset !important;
}<div class="container">
<div class="box">
<p>Hey, don't cut me off like that. I want</p>
</div>
<button onclick="more(this)">Read More</button>
</div>
<div class="container">
<div class="box">
<p>Hey, don't cut me off like that. I want to speak my mind and don't appreciate being put into a box.</p>
</div>
<button onclick="more(this)">Read More</button>
</div>